<!--
 * @Description  :
 * @Autor        : guoxi
 * @Date         : 2022-08-12 17:19:03
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2022-09-06 17:03:01
 * @FilePath     : \rpms\src\views\project\funds\detail\components\ExecutionTable.vue
-->
<template>
  <el-row>
    <el-col :span="22">
      <span>项目总预算:{{ model.globalBudget }} 元</span>
      &nbsp; &nbsp; &nbsp;
      <span>实际产生费用(合计): {{ model.globalSpend }}元</span>
      &nbsp; &nbsp; &nbsp;
    </el-col>
    <!-- <el-col :span="2">
      <el-button
        v-auth="`project-funds-1-export`"
        class="right-btn"
        type="primary"
        @click="handleExport"
        >导出</el-button
      >
    </el-col> -->
  </el-row>
  <br />
  <el-skeleton :loading="model.loading" animated>
    <TreeTable
      :value="model.treeTableData"
      :col="cloumns"
      :type="model.dataType"
    />
  </el-skeleton>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from "vue";
import TreeTable from "/@/components/treeTable/index.vue";
import { dataType2 } from "/@/components/treeTable/data";
import { postDownload } from "/@/utils/download";
import { getBudgetDetail } from "/@/api/funds";
import { useRoute } from "vue-router";
const cloumns = ref([]);
const model = reactive({
  treeTableData: [],
  dataType: dataType2,
  globalBudget: "",
  globalSpend: "",
  loading: true
});

const route = useRoute();
const initGetData = async id => {
  const { code, data } = await getBudgetDetail(id);
  if (code === 200 && data) {
    model.treeTableData = data.data;
    if(model.treeTableData?.length){
      const len = model.treeTableData[0].fees.length;
      if(len){
        model.globalBudget = model.treeTableData[0].fees[len -1].budgetSum;
        model.globalSpend = model.treeTableData[0].fees[len -1].spendSum;
      }
    }
  }
  model.loading = false;
};

onMounted(async () => {
  const { query } = route;
  if (!query.id) return;

  await initGetData(query.id);

  model.treeTableData.forEach(el => {
    (cloumns.value as any).push({
      name: el.deptName,
      align: "center",
      children: [
        {
          name: "预算",
          align: "center",
          parent: el.deptName,
          parent2: "项目经费总额-预算"
        },
        {
          name: "支出",
          align: "center",
          parent: el.deptName,
          parent2: "项目经费总额-支出"
        },
      ],
    });
  });

  // model.treeTableData.forEach(el => {
  //   (cloumns.value as any).push({
  //     name: el.deptName,
  //     align: "center",
  //     children: [
  //       {
  //         name: "项目经费总额",
  //         align: "center",
  //         children: [
  //           {
  //             name: "预算",
  //             align: "center",
  //             parent: el.deptName,
  //             parent2: "项目经费总额-预算"
  //           },
  //           {
  //             name: "支出",
  //             align: "center",
  //             parent: el.deptName,
  //             parent2: "项目经费总额-支出"
  //           },
  //         ]
  //       },
  //       {
  //         name: "政府资金",
  //         align: "center",
  //         children: [
  //           {
  //             name: "预算",
  //             align: "center",
  //             parent: el.deptName,
  //             parent2: "政府资金-预算"
  //           },
  //           {
  //             name: "支出",
  //             align: "center",
  //             parent: el.deptName,
  //             parent2: "政府资金-支出"
  //           },
  //         ]
  //       },
  //       {
  //         name: "企业自筹",
  //         align: "center",
  //         children: [
  //           {
  //             name: "预算",
  //             align: "center",
  //             parent: el.deptName,
  //             parent2: "企业自筹-预算"
  //           },
  //           {
  //             name: "支出",
  //             align: "center",
  //             parent: el.deptName,
  //             parent2: "企业自筹-支出"
  //           },
  //           {
  //             name: "预算执行率",
  //             align: "center",
  //             parent: el.deptName,
  //             parent2: "企业自筹-预算执行率"
  //           }
  //         ]
  //       },
  //       {
  //         name: "其他支出",
  //         align: "center",
  //         children: [
  //           {
  //             name: "预算",
  //             align: "center",
  //             parent: el.deptName,
  //             parent2: "其他支出-预算"
  //           },
  //           {
  //             name: "支出",
  //             align: "center",
  //             parent: el.deptName,
  //             parent2: "其他支出-支出"
  //           },
  //           {
  //             name: "预算执行率",
  //             align: "center",
  //             parent: el.deptName,
  //             parent2: "其他支出-预算执行率"
  //           }
  //         ]
  //       }
  //     ]
  //   });
  // });
});

const handleExport = async () => {
  const { query } = route;
  await postDownload(
    `/rdms-admin/fee/budget/carryout/export/${query.id}`,
    `项目预算执行表导出.xlsx`
  );
};
</script>

<style lang="scss" scoped>
.right-btn {
  float: right;
}
</style>
